<template>
	<view style="width: 100%;min-height: 100vh;background-color: #f1f1f1;">
		<view style="padding: 20upx;background-color: #ffffff;">
			<u-search placeholder="输入车牌号查询" v-model="carNumSearch" @search="getData()" @custom="getData()"></u-search>
		</view>
		<view style="height: 1upx;"></view>
		<view class="item" v-for="(res, index) in siteList" :key="res.id">
			<view class="top" style="position: relative;display: flex;justify-content: space-between">
				<view class="name">{{ res['驾驶员姓名'] }}</view>
				<view class="phone">{{ res['车号'] }}</view>
				<view class="tag" style="justify-self: flex-end;">
					<u-button size="mini" type="success" @click="pay(res['车号'])" v-if="res['类型编号'] == '1'">
						<u-icon :name="'weixin-fill'"></u-icon>
						微信支付
					</u-button>
				</view>
			</view>
			<view class="bottom">车辆类型: {{ res['类型名称'] }}</view>
			<view class="bottom">供货单位: {{ res['供货单位'] }}</view>
		</view>
		<view v-if="siteList.length === 0" style="padding-top: 200upx;">
			<u-empty text="无车辆信息" mode="data"></u-empty>
			<view class="alert-desc">温馨提示:请先进行车辆登记并再次扫码支付</view>
		</view>
		<view style="display: flex;justify-content: center;margin-top: 50upx;">
			<u-button style="width: 40%;" type="primary" shape="circle" size="medium" @click="goHome">返回首页</u-button>
			<u-button style="width: 40%;" type="primary" shape="circle" size="medium" @click="addCar">手动输入</u-button>
		</view>

		<u-modal @confirm="addCarConfirm" title="手动输入车牌号" v-model="showModal" confirm-text="确定为此车缴费">
			<view class="slot-content">
				<u-form-item label="车牌号" label-width="100"><u-input placeholder="请输入车牌号" v-model="carNum" /></u-form-item>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			carNum: '',
			carNumSearch:'',
			showModal: false,
			siteList: [],
			showDelAlert: false,
			delAlertContent: '确定删除',
			currentItem: ''
		};
	},
	onLoad() {
		uni.removeStorageSync('redirect_url');
		this.getData();
	},
	methods: {
		addCarConfirm(){
			if(!this.carNum){
				uni.showToast({
					title:"请输入车牌号再点击支付",
					icon:"none"
				})
			}
			this.pay(this.carNum)
		},
		addCar() {
			this.showModal = true;
		},
		goHome() {
			console.log('goHome');
			uni.switchTab({
				url: '/pages/oa/home/home'
			});
		},
		async pay(carNum) {
			uni.showLoading({
				title: '创建支付订单'
			});
			
			 
			try {
				let res = await this.$ajax.post({
					url: '/WxPay/createWeightPassOrder',
					data: {
						car_id: carNum
					}
				})
				uni.hideLoading();
				
				uni.showLoading({
					title: '支付等待'
				});
				let signRes = await this.$ajax.post({
					url: '/WxPay/payWeightPassOrder',
					data: {
						openid:uni.getStorageSync("token"),
						order_num: res.data.order_num
					}
				});
				uni.hideLoading();
				let paySign = signRes.data;
				console.log(paySign);
				let payParams = {
					appId: paySign.appId,
					timestamp: paySign.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
					nonceStr: paySign.nonceStr, // 支付签名随机串，不长于 32 位
					package: paySign.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
					signType: paySign.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
					paySign: paySign.paySign // 支付签名
				};
				console.log(payParams);
				wxjs.chooseWXPay({
					...payParams,
					success: function(res) {
						// 支付成功后的回调函数
						console.log(res);
						console.log('支付完成');
						uni.switchTab({
							url: '/pages/oa/home/home'
						});
					}
				});
			}catch(err){
				uni.hideLoading();
			}
		},
		getData() {
			uni.showLoading({
				title: '加载中'
			});
			this.$ajax
				.get({
					url: '/Car/getList?carNum='+this.carNumSearch
				})
				.then(res => {
					setTimeout(() => {
						uni.hideLoading();
						this.siteList = res.data;
					}, 1000);
				});
		},
		toAddSite() {
			uni.navigateTo({
				url: '/pages/oa/car-list/add'
			});
		},
		delCar(item) {
			this.currentItem = item;
			this.showDelAlert = true;
		},
		delAlertConfirmHandle() {
			console.log(this.currentItem);
			this.$ajax
				.post({
					url: '/Car/delCar',
					data: {
						车牌号: this.currentItem['车号']
					}
				})
				.then(res => {
					if (res.data.result == '0') {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						this.getData();
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.slot-content {
	padding: 20upx 30upx;
}
.item {
	padding: 40rpx 20rpx;
	width: 690upx;
	margin-left: 30upx;
	background-color: #ffffff;
	margin-top: 30upx;
	border-radius: 16upx;
	.top {
		display: flex;
		font-weight: bold;
		font-size: 34rpx;
		.phone {
			margin-left: 60rpx;
		}
		.tag {
			display: flex;
			font-weight: normal;
			align-items: center;
			text {
				display: block;
				width: 60rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				margin-left: 30rpx;
				background-color: rgb(49, 145, 253);
			}
			.red {
				background-color: red;
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
	}
}
.addSite {
	display: flex;
	justify-content: space-around;
	width: 600rpx;
	line-height: 100rpx;
	position: absolute;
	bottom: 30rpx;
	left: 80rpx;
	background-color: red;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add {
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon {
			margin-right: 10rpx;
		}
	}
}
.delete-icon {
	color: $u-type-error;
}
.alert-desc {
	color: #999999;
	font-size: 28upx;
	width: 690upx;
	text-align: center;
	margin-left: 30upx;
	margin-top: 50upx;
	margin-bottom: 50upx;
}
</style>
